<!--配送商端-销售管理-寄售补货需求订单列表-->
<template>
  <div class="replenishment-list">
    <el-container class="container-box">
      <!-- 搜索查询 -->
      <el-header height="auto">
        <SearchForm
          :label-width="'100px'"
          show-collapse
          :data="replenishmentOrderSearchForm"
          ref="replenishmentOrderSearchForm"
          :compact-data="compactSearchForm"
          @searchForm="searchForm"
          @resetForm="resetForm"
          :submit-loading="submitLoading"
        />
      </el-header>

      <!-- 列表模块 -->
      <el-editable
        v-loading="tableLoading"
        :data="replenishmentOrderList"
        height="400"
        :columns="replenishmentOrderColumns"
      />
      <!-- 分页模块 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="PAGE_NUMBER"
        :page-size="pageSize"
        :layout="PAGINATION_LAYOUT"
        :total="totalElements"
      />
      <el-dialog
        title="下载数据"
        :visible.sync="dialogVisible"
        width="800px"
        :before-close="handleClose"
      >
        <el-form
          :model="downloadForm"
          :rules="rulesDownload"
          ref="downloadForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="文件名称">
            <el-input
              v-model="downloadForm.fileName"
              placeholder="默认文件名为：结算明细查询数据导出-导出时间.xlsx"
              maxlength="50"/>
          </el-form-item>
          <el-form-item
            label="下载字段"
            prop="fieldKeys">
            <el-checkbox-group v-model="downloadForm.fieldKeys">
              <el-checkbox
                v-for="(item,index) in fieldList"
                :key="index"
                :label="item.key"
              >{{ item.value }}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item style="display:flex; justify-content: flex-end;">
            <el-button @click="handleClose">取 消</el-button>
            <el-button
              type="primary"
              @click="toDownload()">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import ElEditable from '@components/el-editable/index.vue'
import SearchForm from '@components/businesscomponents/search'
import { SEARCH_FORM, ORDER_COLUMNS } from './const.js'
import { isObject, cloneDeep, hasIn } from 'lodash'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common.js'
import {
  pssSettleRecordList,
  getExcelExportField,
  recordExcelExport
} from '@const/beforeSettleApi'
export default {
  name: 'SaleList',
  components: { ElEditable, SearchForm },
  data () {
    return {
      submitLoading: false,
      replenishmentOrderSearchForm: SEARCH_FORM, // 查询条件
      // table列表配置信息
      tableLoading: false,
      replenishmentOrderList: [],
      replenishmentOrderColumns: ORDER_COLUMNS, // table列表表头
      // 分页配置信息
      curPage: 1,
      PAGE_NUMBER,
      PAGINATION_LAYOUT,
      pageSize: PAGE_NUMBER[0],
      totalElements: 0,
      exportLoading: false,
      searchData: {},
      dialogVisible: false,
      downloadForm: {
        fileName: '',
        fieldKeys: []
      },
      rulesDownload: {
        fieldKeys: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个字段',
            trigger: 'blur'
          }
        ]
      },
      fieldList: []
    }
  },
  computed: {
    compactSearchForm () {
      return this.replenishmentOrderSearchForm.slice(0, 3)
    }
  },
  mounted () {
    this.getDataList()
    // this._btn()
  },
  methods: {
    _btn () {
      const btn = {
        type: 'btn',
        arr: [
          { type: 'primary', val: '下载中心', handle: this.toDownloadCenter },
          { type: 'primary', val: '下载数据', handle: this.exportExcel }
        ]
      }
      this.$store.commit('changeLayoutHandle', btn)
    },
    toDownloadCenter () {
      let ht = window.location.origin
      let url = '/guoke-deepexi-channel-pc/#/channelManagement/contractManagement/exportRecord'
      window.location.href = ht + url
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 确定导出数据
    toDownload () {
      this.$refs['downloadForm'].validate((valid) => {
        if (valid) {
          this.$axios
            .post(recordExcelExport, {
              page: this.curPage,
              pageSize: this.pageSize,
              ...this.searchData,
              ...this.downloadForm
            })
            .then(res => {
              console.log(res)
              if (res.data.code === '0') {
                this.toDownloadCenter()
              }
            })
            .catch((error) => {
              console.log(error)
            })
        }
      })
    },

    // 导出表格事件
    exportExcel (params) {
      this.dialogVisible = true
      this.$axios
        .post(getExcelExportField)
        .then(res => {
          if (Number(res.data.code) !== 0) return
          this.fieldList = res.data.payload || []
          this.downloadForm.fieldKeys = this.fieldList.map(item => {
            return item.key
          })
        })
        .catch((error) => {
          console.log(error)
        })
    },
    searchForm (condition) {
      this.submitLoading = true
      this.searchData = condition
      this.getDataList()
    },
    resetForm (condition) {
      this.curPage = 1
      this.searchData = condition
      this.getDataList()
    },

    getDataList () {
      this.tableLoading = true
      this.$axios
        .post(pssSettleRecordList, {
          page: this.curPage,
          pageSize: this.pageSize,
          ...this.searchData
        })
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.replenishmentOrderList = hasIn(data, ['payload', 'content'])
            ? data.payload.content
            : []
          this.totalElements = data.payload.totalElements
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
          this.tableLoading = false
          this.submitLoading = false
        })
    },
    handleSizeChange (size) {
      this.curPage = 1
      this.pageSize = size
      this.getDataList()
    },
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getDataList()
    }
  }
}
</script>

<style lang="less">
.replenishment-list {
  .container-box {
    height: 100%;
    overflow: auto;
    .pagination {
      padding-top: 10px;
      display: flex;
      justify-content: flex-end;
      padding-right: 0;
    }
    .el-checkbox-group {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
    }
    .el-checkbox {
      display: flex;
      margin-bottom: 5px;
    }
    .el-checkbox__label {
      color: black;
      display: block;
      width: 110px;
    }
    .custom-search-form .filter-box .el-input__inner {
      width: 230px;
    }
  }
}
</style>
